<html>
<head>
        <title>{{ campaign }}</title>
	<link rel="stylesheet" href="/css/main.css" type="text/css">
	<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/css" media="screen, projection" />
	<!--[if IE]><link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
        <script src="javascript/prototype.js" type="text/javascript"></script>
        <script src="javascript/scriptaculous.js" type="text/javascript"></script>
 	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAbxIBxk4RA2V7uaS03qfgehR1_NmUKPTm2nVibGxbXYGWleyp4hRFDmL6NEzmQcVZ_MODCCtPtLFdIA" type="text/javascript"></script>
        <script src="javascript/stats.js" type="text/javascript"></script>

        <script language="javascript" type="text/javascript">
        function showMap()
        {

                performRequest('/map');
        }

        function showStats()
        {
                performRequest('/stats', function(request){
                        showResponse(request);
			initialize_stats("{{domain}}","{{key}}","{{mapdivname}}",{{mapclat}},{{mapclon}},{{mapzl}});
                });
        }

        function showParticipate()
        {
                performRequest('/participate');
        }

        function showDocument()
        {
                performRequest('/document');
        }


        function performRequest(url, fn)
        {
                var myAjax = new Ajax.Request(url, {
                        method: 'get',
                        onComplete: fn || showResponse
                });
        }

        function showResponse(request)
        {
                $('main').innerHTML = request.responseText;
        }
        </script>

        <script type="text/javascript">

        document.observe("dom:loaded", function() {

            performRequest('/map');
        });

        </script>
</head>

<body>
<div class="container">

        <div id="header" class="span-16" style="background-color:#8F4B21;">
        <br><h3><font color="white"><b>&nbsp; <a href="./" class="white">{{ campaign }}</a></b></h3></font>
        </div>
        <div id="c1" class="span-2" style="background-color:#BE954B;"><br><br><br></div>
        <div id="c1" class="span-2" style="background-color:#857458;"><br><br><br></div>
        <div id="c1" class="span-2" style="background-color:#CCBB86;"><br><br><br></div>
        <div id="c1" class="span-2 last" style="background-color:#BFA723;"><br><br><br></div>

        <div id="headertext" class="span-24 last"><br></div>

        <div id="info" class="span-6" style="background-color:white;">

        <div id="navigation" style="font-weight: bold; background-color:#D9D9D9; padding: 5px 5px 5px 5px;">Navigation</div>

        <div style="background-color:#8F4B21; padding: 5px 5px 5px 5px;">
        <span class="nav">> <a href="#" onClick="showMap();">Map</a></span>
        </div>

        <div style="background-color:#BE954B; padding: 5px 5px 5px 5px;">
        <span class="nav">> <a href="#" onClick="showParticipate();">Participate</a></span>
        </div>

        <div style="background-color:#857458; padding: 5px 5px 5px 5px;">
        <span class="nav">> <a href="#" onClick="showDocument();">Document</a></span>
        </div>

        <div style="background-color:#CCBB86; padding: 5px 5px 5px 5px;">
        <span class="nav">> <a href="#" onClick="showStats();">Stats</a></span>
        </div>


        <br>

        <span class="header"><h3>Help us document beach elements.</h3></span>
	{{ message }}
        <br><br>
       <h5>Sponsors</h5>
        <a href="http://cens.ucla.edu" target="_blank">CENS</a> | <a href="http://ucla.edu" target="_blank">UCLA</a>
        <br><br>
       <h5>Related Projects</h5>
	<a href="http://habwatch.com" target="_blank">HabWatch</a> | <a href="http://healthebay.org/" target="_blank">Heal the Bay</a> | <a href="http://www.nhbc.fiu.edu/" target="_blank">National Healthy Beaches Campaign</a> 
        <br><br><br>
       </div>

        <div id="main" class="span-18 last" style="overflow: hidden">
            <div id="map_canvas" style="width: 700px; height: 450px"></div>
            <div id="map_legend" style="width: 700px; height: 20px"></div>
        </div>

       <hr />

     </div>
</body>
</html>


